<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地点索引</title>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=dGV3Nl6rFSsf3qMweDobQu8o8jXd1Laz"></script>
    <script src="zepto.js"></script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            height: 500px;
            width: 100%;
        }

        #r-result {
            width: 100%;
            font-size: 14px;
            position: relative;
        }

        #list {
            position: absolute;
            top: 22px;
            width: 100%
        }

        #list li {
            line-height: 25px;
            background: #dedede;
            margin: 1px 0;
            padding: 0 5px;
            list-style: none;
        }

        #btn {
            cursor: pointer;
            color: orangered;
        }
    </style>
</head>

<body>
    <div id="allmap"></div>
    <div id="r-result">
        城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
        地址: <input id="localName" type="text" style="width:100px; margin-right:10px;" />
        <input type="button" value="查询" onclick="theLocation()" />
        <ul id="list"></ul>

    </div>
</body>
<script>
    var map = new BMap.Map("allmap");

    var point = new BMap.Point(113.64371562133744, 34.72920157550659);

    map.centerAndZoom(point, 15);

    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放

    function theLocation() {
        // localName
        var index = $("#localName").val();
        var place = $("#cityName").val();
        if (index) {

            var address = $("#cityName").val() + $("#localName").val();
            var node = document.createElement("script");
            node.src = "http://api.map.baidu.com/place/v2/search?query=" + index + "&region=" + place + "&output=json&ak=00EvVBGyqOZLhHln2lVLESrPXSyU5fIQ&callback=fun";
            document.body.appendChild(node);

        } else {

            var address = $("#cityName").val();
            var node = document.createElement("script");
            node.src = "http://api.map.baidu.com/geocoding/v3/?address=" + address + "&output=json&ak=00EvVBGyqOZLhHln2lVLESrPXSyU5fIQ&callback=ret";
            document.body.appendChild(node);
        }

    }
    function ret(res) {
        var lng = res.result.location.lng;
        var lat = res.result.location.lat;
        var point = new BMap.Point(lng, lat);
        map.setCenter(point);
    }

    function fun(res) {
        var res = res.results;
        console.log(res[0].location.lat);
        console.log(res);
        var list = document.getElementById('list')

        var html = ""
        for (let i = 0; i < res.length; i++) {

            html += "<li><a id='btn' index=" + res[i].location.lng + "," + res[i].location.lat + " >" + res[i].name + "<p id='tel'>电话："+(res[i].telephone?res[i].telephone:'无')+"</p><p>" + res[i].address + " </p> </a></li>"
        }
        list.innerHTML = html;


        // var lng = res.result.location.lng;
        // var lat = res.result.location.lat;
        // // console.log(lng,lat);
        // var point = new BMap.Point(lng, lat);

        // var marker = new BMap.Marker(point);

        // map.setCenter(point);

        // map.addOverlay(marker);

        // var name = $("#localName").val()
        // marker.addEventListener("click", function (e) {

        //     var opts = {
        //         width: 250,     // 信息窗口宽度
        //         height: 100,    // 信息窗口高度
        //         title: "Hello"  // 信息窗口标题
        //     }
        //     var infoWindow = new BMap.InfoWindow(name + "欢迎您", opts);  // 创建信息窗口对象
        //     map.openInfoWindow(infoWindow, map.getCenter());
        // })

        list.onclick = function (e) {
            console.log(e.target);
            console.log(res[0].location.lat)
            //  console.log(res[this].location.lat);
            
            if (e.target.nodeName == "A") {
                var index = e.target.getAttribute("index");


                // var lat=e.target.getAttribute("lat");
                // console.log(JSON.stringify(lng));
                var local = index.split(',')
                console.log(index.split(','));

                var lng = local[0];
                var lat = local[1];
                console.log(lng, lat);

                var point = new BMap.Point(lng, lat);
                var market = new BMap.Marker(point);
                map.addOverlay(market);
                map.setCenter(point);
                market.addEventListener("click", function () {
                    console.log(e.target.innerHTML);
                var name=e.target.innerHTML+ "欢迎您";
                
                    var opts = {
                        width: 250,
                        height: 100,
                        title: ""+name+""
                    }
                    var infoWindow = new BMap.InfoWindow(name , opts);  // 创建信息窗口对象
                    map.openInfoWindow(infoWindow, map.getCenter());
                })
            }
        }

    }


</script>

</html>